<template>
  <div>
    <div class="operation">
      <a-button @click="showpic" type="primary">
        <template v-slot:icon>
          <icon-eye/>
        </template>
        查看图片
      </a-button>
      <span style="margin: 0 5px;"></span>
      <a-button @click="uploadvisible=true" type="primary" status="warning">
        <template v-slot:icon>
          <icon-upload/>
        </template>
        上传图片
      </a-button>
      <span style="margin: 0 5px;"></span>
      <a-button :loading="deletepicloading" @click="deletepic" type="primary" status="danger">
        <template v-slot:icon>
          <icon-delete/>
        </template>
        删除图片
      </a-button>
      <span style="margin: 0 5px;"></span>
      <a-button @click="BatchDownLoad" type="primary" status="success">
        <template v-slot:icon>
          <icon-download/>
        </template>
        下载图片
      </a-button>
    </div>
    <div class="search">
      <a-form :model="where" auto-label-width layout="inline">
        <a-form-item label="文件旧称：">
          <a-input v-model="where.oldfilename" placeholder="输入搜索内容进行搜索..." :allow-clear="true"/>
        </a-form-item>
        <a-form-item label="文件新称：">
          <a-input v-model="where.newfilename" placeholder="输入搜索内容进行搜索..." :allow-clear="true"/>
        </a-form-item>
        <a-form-item label="文件后缀：">
          <a-input v-model="where.suffix" placeholder="输入搜索内容进行搜索..." :allow-clear="true"/>
        </a-form-item>
        <a-form-item label="文件分类：">
          <a-input v-model="where.filetype" placeholder="输入搜索内容进行搜索..." :allow-clear="true"/>
        </a-form-item>
        <a-form-item label="文件夹位置：">
          <a-input v-model="where.filepath" placeholder="输入搜索内容进行搜索..." :allow-clear="true"/>
        </a-form-item>
        <a-form-item>
          <a-button status="success" @click="search">
            <template #icon>
              <icon-search/>
            </template>
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>搜索</template>
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <main :style="{'height':divheight-250+'px'}" style="background-color: white;">
      <f_table
          power="查询"
          url="Query/GetInfo"
          :where="where"
          :divheight="divheight-250"
          ref="tableinfo"
      >
      </f_table>
    </main>
    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="visible=false" draggable :mask-closable="false"
             cancel-text="关闭" ok-text="下载" :closable="false" :align-center="true">
      <template #title>图片查看</template>
      <div style="text-align: center">
        <a-image v-if="visible" width="400" :src="picurl+'/API/GetFile?guid='+picguid"/>
      </div>
    </a-modal>
    <a-modal v-model:visible="uploadvisible" :hide-cancel="true" @ok="uploadOK" ok-text="关闭" draggable :mask-closable="false" :closable="false" :align-center="true">
      <template #title>上传图片</template>
      <div style="text-align: center">
        <a-upload
            v-if="uploadvisible"
            draggable
            name="file"
            :multiple="false"
            :limit="1"
            :onSuccess="uploadsuccess"
            :action="uploadurl"
        />
      </div>
    </a-modal>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';

import {DeletePic, DownLoadPic} from "@/hooks/usePic";
import f_table from "@/components/f-table/f_table.vue";

export default {
  name: "Index",
  components: {f_table},
  data() {
    return {
      visible: false,
      uploadvisible:false,
      divheight: window.innerHeight,
      where: {
        resouretype: "图片",
        oldfilename: "",
        newfilename: "",
        suffix: "",
        filetype: "",
        filepath: "",
      },
      picguid: null,
      picurl: window.ip,
      deletepicloading:false,
      uploadurl:window.ip+"/API/Upload"
    }
  },
  methods: {
    // 文件上传成功之后的回调
    uploadsuccess(){
      this.uploadvisible=false
      this.search()
    },
    // 关闭上传图片弹框
    uploadOK(){
      this.search()
    },
    // 删除图片
    deletepic() {
      const _this = this
      _this.$refs.tableinfo.selectRowEvent(row => {
        _this.deletepicloading=true
        DeletePic(row.guid).then(data=>{
          _this.deletepicloading=false
          _this.search()
        }).catch(err=>{
          _this.deletepicloading=false
        })
      })
    },
    // 批量下载图片
    BatchDownLoad() {
      this.$refs.tableinfo.selectRowEvents(rows => {
        rows.forEach(x => {
          DownLoadPic(x.guid,x.oldfilename)
        })
      })
    },
    // 搜索
    search() {
      this.$refs.tableinfo.LoadData()
    },
    // 查看图片
    showpic() {
      this.$refs.tableinfo.selectRowEvent(row => {
        this.visible = true
        this.picguid = row.guid
      })
    },
    // 图片查看中点击下载的事件
    handleOk() {
      const _this = this
      _this.$refs.tableinfo.selectRowEvent(row => {
        this.visible = false;
        DownLoadPic(row.guid, row.oldfilename)
      })
    },
  },
}
</script>

<style scoped>
.search {
  padding: 10px;
  height: 35px;
  margin-bottom: 10px;
  background-color: white;
}

.operation {
  padding: 10px;
  height: 35px;
  line-height: 35px;
  margin-bottom: 10px;
  background-color: white;
}
</style>